<template>
  <div class="fresh">
    <div class="pl">
      <div class="pl-head">商品全部评价（{{comment.length}}）</div>
      <div class="box">
        <div class="list" v-for="item in comment">
          <div class="list-head">
            <!-- <img :src="comimgsrc+item.headimg" alt=""> -->
            <img v-if="item.headimg" :src="comimgsrc+item.headimg" alt="">
            <img v-else :src="cp1" alt="">
            <div class="name">{{item.username}}</div>
            <p class="time">{{item.create_time}}</p>
          </div>
          <div class="rate">
            <p style="float: left;">评分：</p><el-rate disabled text-color="#ef5a68" :value="item.star" show-text></el-rate>
          </div>
          <p class="txt">{{item.content}}</p>
          <div class="alts">
            <div class="img" v-for="imgs in item.img" v-show="imgs">
              <div class="cont">
                <img :src="comimgsrc+imgs">
              </div>
            </div>
          </div> 
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import qs from 'qs';
import cp1 from '@/assets/image/cp1.jpg';
export default {
	name: 'index',
  	data () {
  		return{
        comimgsrc:'http://api.mountainfreshes.com',
        comment:[],
        cp1
  		}
  	},
  	methods:{
      getsppl:function(){
        this.$http.post("/index.php/index/content/index",qs.stringify({
              // mobile:this.tel,
              // password:this.pwd
                  good_id: this.$route.query.cpid

              }))
              .then(res => {
                this.comment = res.data.row
                console.log(this.comment)
              })
              .catch(error => {
                alert("网络错误")
              });
      }
  	},
  	components:{

  	},
  	mounted(){
    },
    created(){
      this.getsppl();
    },
    watch:{
          '$route' (to, from) {
                // this.getinfo()
               //   const toDepth = to.path.split('/').length
                // const fromDepth = from.path.split('/').length
                // this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
                // console.log(to.name)
                if(to.name == 'detailComment'){
                  this.getsppl();
                }
              }
        }
}
</script>
<style scoped lang="less">


.pl{
  width: 100%;
  height: auto;
  zoom: 1;
  overflow: hidden;
  margin-top: .2rem;
  .pl-head{
    padding: 0 .2rem;
    height: .6rem;
    line-height: .6rem;
    font-size: .26rem;
    text-align: left;
    border-bottom: 1px solid #d6d6d6;
  }
  .box{
    padding: .2rem;
    height: auto;
    zoom: 1;
    overflow: hidden;
    .list{
      width: 100%;
      height: auto;
      zoom: 1;
      overflow: hidden;
      text-align: left;
      border-bottom: 1px dashed #d6d6d6;
      margin-bottom: .2rem;
      .list-head{
        width: 100%;
        height: .72rem;
        img{
          display: block;
          width: .72rem;
          height: .72rem;
          float: left;
          border-radius: 100%;
          overflow: hidden;
        }
        .name{
          width: 3.2rem;
          height: 100%;
          font-size: .24rem;
          color: #333;
          font-size: .24rem;
          line-height: .72rem;
          text-align: left;
          float: left; 
          margin-left: .14rem;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .time{
          float: right;
          line-height: .72rem;
          color: #666;
          font-size: .22rem;
        }
      }
      .txt{
        font-size: .22rem;
        color: #333;
        padding-top: .12rem;
        padding-bottom: .1rem;
      }
      .rate{
        font-size: .22rem;
        margin-top: .1rem;
      }
      .alts{
        width: 100%;
        height: auto;
        zoom: 1;
        overflow: hidden;
        margin-top: .1rem;
        .img{
          width: 1.36rem;
          height: 1.2rem;
          float: left;
          margin-left: 0.1866666666666666rem;
          background: #d6d6d6;
          margin-bottom: .1rem;
          &:nth-child(4n+1){
            margin-left: 0;
          }
          .cont{
            width: 1.36rem;
            height: 1.2rem;
            text-align: center;
            display: table-cell;
            vertical-align: middle;
            overflow: hidden;
            img{
              max-width: 100%;
              max-height: 100%;
              vertical-align: middle;
              display: hidden;
              transform: scale(1);
              transition: all ease 0.2s;
            }
          }
        }
      }
    }
  }
  .editbox{
    padding: .2rem;
    height: auto;
    zoom: 1;
    overflow: hidden;
    img{
      max-width: 100%;
    }
  }
  .more{
    width: 2.2rem;
    height: .52rem;
    border: 2px solid #b5b5b5;
    border-radius: 4px;
    margin: 0rem auto .2rem;
    color: #666;
    line-height: .52rem;
    font-size: .24rem;
  }
}

</style>